<template>
  <div style="width:100vw;display:flex;justify-content: center;background:#F9F9F9">
    <div class="container" style="width:75vw">
      <ExamNavBar :examId="examId" :semesterId="semesterId" />
      
      <!-- 页面特有内容 -->
      <div class="content-section">
        <EditExamdetail :examId="examId" :semesterId="semesterId" :paperId="paperId" :showPaperHeader="false" />
        <div v-if="paperData">
          <!-- 试卷内容结构 -->
        </div>
        <div v-else class="loading">加载中...</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import ExamNavBar from '@/components/ExamNavBar.vue';
import EditExamdetail from '@/views/EditExamdetail.vue';
import { getPaperDetails } from '@/services/api';

export default {
  name: 'PaperEdit',
  components: { ExamNavBar, EditExamdetail },
  props: {
    examId: [String, Number],
    semesterId: [String, Number],
    paperId: [String, Number]  // 确保通过 props 传递 paperId
  },
  setup(props) {
    // 获取 paperId 的逻辑，首先尝试从 props 获取，如果没有则从 localStorage 获取
    const paperId = ref(props.paperId || localStorage.getItem('currentPaperId'));
    const paperData = ref(null);  // 定义 paperData 为响应式变量

    onMounted(() => {
      if (paperId.value) {
        fetchPaperDetails();  // 获取试卷详情
      } else {
        console.warn('paperId 未找到，请检查路由参数或 localStorage');
      }
    });

    const fetchPaperDetails = async () => {
      try {
        const response = await getPaperDetails(paperId.value);  // 确保 paperId 已定义
        if (response.status === 200 && response.data.status === 1) {
          paperData.value = response.data.data;  // 设置响应数据到 paperData
        } else {
          console.error('获取试卷详情失败:', response.data.msg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    console.log("当前 paperId:", paperId.value);

    return { 
      paperData  // 暴露 paperData 到模板
    };
  }
};
</script>

<style scoped>
/* 复用现有样式 */
.content-section {
  background-color: #ffffff;
  padding: 20px 30px;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
  padding: 50px 0;
  color: #666;
}
</style>
